<template>
    <div class="personal">
        <div class="personal-left">
            <div class="top">
                <div><el-image class="image" style="width: 100px; height: 100px" :src="srcToPath(userInfo.avatar ?? '')"
                        fit="fit" />
                </div>
                <div class="top-right">
                    <div class="username">
                        {{ userInfo.username }}
                    </div>

                    <div class="article-text">共{{ page.total }}篇文章</div>
                </div>
            </div>

            <div class="my-center">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="文章" name="first">
                        <div class="inner">

                            <el-radio-group v-model="page.type" size="small" @change="() => pageHandle('type')">
                                <el-radio-button label="时间" value="2" />
                                <el-radio-button label="热度" value="1" />
                            </el-radio-group>
                            <div style="margin-left:10px;" title="排序" @click="() => pageHandle('desc')">
                                <el-tag type="primary">
                                    <el-icon v-if="page.desc == '1'">
                                        <SortDown />
                                    </el-icon>
                                    <el-icon v-else>
                                        <SortUp />
                                    </el-icon>
                                </el-tag>
                            </div>
                        </div>
                        <div class="artocle-main">
                            <div class="top">
                                <div class="item" @click="toArticleDetils(item.id)" v-for="item in articleList"
                                    :key="item.id">
                                    <div>
                                        <img :src="srcToPath(item.cover)"
                                            :alt="item.title" :title="item.title" />
                                    </div>
                                    <p class="title">{{ item.title }}</p>
                                    <span class="clamp" style="text-overflow: ellipsis;">{{ item.summary }}</span>
                                    <div class="inner" style="justify-content: space-between;">
                                        <p class="username" @click.stop="">
                                            {{ formatDate(item.createdAt) }}
                                        </p>
                                        <div class="inner" style="justify-content: space-between;width:50%">

                                            <el-icon @click.stop="delArticle(item.id)" :size="20" :color="'red'">
                                                <Delete />
                                            </el-icon>
                                            <el-icon @click="toArticle(item.id)" :size="20" :color="'#129646'">
                                                <Edit />
                                            </el-icon>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <el-pagination v-model:current-page="page.pageNum" v-model:page-size="page.pageSize"
                            :page-sizes="[10, 20, 30]" :small="small" :disabled="disabled" :background="background"
                            layout="total, sizes, prev, pager, next, jumper" :total="page.total"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </el-tab-pane>
                    <el-tab-pane label="评论我的" name="second">
                        <commentMy v-if="activeName == 'second'" />
                    </el-tab-pane>
                    <el-tab-pane label="回复我的" name="third">
                        <replyMy v-if="activeName == 'third'" />
                    </el-tab-pane>
                    <el-tab-pane label="个人信息" name="fourth">
                    </el-tab-pane>

                    <el-tab-pane label="我收藏的" name="fifth">
                        <div class="artocle-main">
                            <div class="top">
                                <div class="item" @click="toArticleDetils(item.id)" v-for="item in collectArticleList"
                                    :key="item.id">
                                    <div>
                                        <img :src="srcToPath(item.cover)"
                                            :alt="item.title" :title="item.title" />
                                    </div>
                                    <p class="title">{{ item.title }}</p>
                                    <span class="clamp" style="text-overflow: ellipsis;">{{ item.summary }}</span>
                                    <div class="inner" style="justify-content: space-between;">
                                        <p class="username" @click.stop="">
                                            {{ formatDate(item.createdAt) }}
                                        </p>
                                        <div class="inner" style="justify-content: space-between;width:50%">

                                            <el-icon :size="20" :color="'red'">
                                                <Delete />
                                            </el-icon>
                                            <el-icon @click="toArticle(item.id)" :size="20" :color="'#129646'">
                                                <Edit />
                                            </el-icon>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <el-pagination v-model:current-page="page1.pageNum" v-model:page-size="page1.pageSize"
                            :page-sizes="[10, 20, 30]" :small="small" :disabled="disabled" :background="background"
                            layout="total, sizes, prev, pager, next, jumper" :total="page1.total"
                            @size-change="handleSizeChange1" @current-change="handleCurrentChange1" />
                    </el-tab-pane>
                </el-tabs>
            </div>


            <MyInfo v-if="activeName == 'fourth'" :info="userInfo" />
        </div>

        <div class="personal-right"></div>
    </div>
</template>
<script setup>
import commentMy from '@/components/commentMy.vue';
import replyMy from '@/components/replyMy.vue';
import MyInfo from '@/components/MyInfo.vue'
import srcToPath from '@/utils/srcToPath.js'
import useUserStore from '@/pinia/userStore'
import { useRouter, useRoute } from 'vue-router';
import { getUserInfo, getUserArticle, getCollectArticle, delMyArticle } from '@/api/personal'
import { unref, ref } from 'vue';
import formatDate from '@/utils/formatDate'
import { ElMessageBox, ElMessage } from 'element-plus';
const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const articleList = ref([])
const activeName = ref('first')
// 别人主页的情况 
const id = ref(route.params.id)

const page = ref({
    pageNum: 1,
    pageSize: 5,
    total: 1,
    type: '1',
    desc: '0',
})
const page1 = ref({
    pageNum: 1,
    pageSize: 5,
    total: 1,
})
// 获取主页个人信息 + 文章列表
const userInfo = ref({})
const init = async () => {
    const params = {}
    if (id.value) {
        params.id = id.value
        page.value.userId = id
    }
    const res = await getUserInfo(params)
    console.log(res);
    userInfo.value = res.data
    getArticlPage()
    // userInfo.value = res.data
}

const getArticlPage = async () => {
    const res = await getUserArticle(unref(page))
    console.log(res);
    articleList.value = res.data.data
    page.value.total = res.data.total
}
const collectArticleList = ref([])
const getCollectArticlPage = async () => {
    const res = await getCollectArticle(unref(page1))
    console.log(res);
    collectArticleList.value = res.data.data
    page1.value.total = res.data.total
}

// 文章主页
const toArticleDetils = (id) => {
    console.log(window.location.hostname);
    const url = `http://${window.location.host}${window.location.hash.includes('#') ? '/#' : ''}/article/${id}`; // 替换为你要打开的页面的路径  
    window.open(url, '_blank'); // '_blank' 表示在新窗口或新标签页中打开
}

const pageHandle = (e) => {
    if (e == 'desc') {
        if (page.value[e] == '1') {
            page.value[e] = '0'
        } else {
            page.value[e] = '1'
        }
    }
    page.value.pageNum = 1
    articleList.value = []
    getArticlPage()
}
// 分页
const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
    page.value.pageSize = val
    getArticlPage()

}
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
    page.value.pageNum = val
    getArticlPage()

}
// 分页
const handleSizeChange1 = (val) => {
    console.log(`${val} items per page`)
    page1.value.pageSize = val
    getCollectArticlPage()

}
const handleCurrentChange1 = (val) => {
    console.log(`current page: ${val}`)
    page1.value.pageNum = val
    getCollectArticlPage()

}
const delArticle = (id) => {
    ElMessageBox.confirm(
        '确定删除该文章吗?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await delMyArticle(id)
            if (res.status == 200) {
                ElMessage.success('删除成功')
                await init()

            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}
const toArticle = (id) => {
    console.log(window.location.hostname);
    const url = `http://${window.location.host}${window.location.hash.includes('#') ? '/#' : ''}/updateArticle/${id}`; // 替换为你要打开的页面的路径  
    window.open(url, '_blank'); // '_blank' 表示在新窗口或新标签页中打开

}
const handleClick = (e) => {
    console.log(e.paneName);
    if (e.paneName == 'fifth') {
        console.log("执行");
        getCollectArticlPage()
    }
}

init()
// const 
</script>
<style lang="scss" scoped>
.inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: start;
    padding: 10px 0;
}



.personal {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;



    .personal-left {
        padding: 20px;
        width: 69%;
    }

    .personal-right {
        width: 29%;
    }

    @media (max-width: 600px) {
        justify-content: space-between;
        flex-wrap: wrap;
        .personal-left {
            padding: 20px;
            width: 100%;
        }

        .personal-right {
            width: 100%;
        }

    }

    .top {

        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;

        .image {
            border-radius: 50%;
            margin-right: 20px;

        }


        .top-right {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: 100px;

            .username {}

            .article-text {
                font-size: 14px;
                color: var(--el-text-color-regular)
            }
        }

    }

    .my-center {
        margin-top: 30px;

        .artocle-main {


            .top {
                display: grid;

                /*grid-column: span 4;
     grid-column-start: span 4;
     grid-column-end: auto;

     grid-template-columns: repeat(4, 1fr) ;*/


                grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
                /* 假设我们想要列平分 */
                grid-gap: 20px;
                /* 设置网格间隙 */
                grid-auto-rows: minmax(100px, auto);
                /* 设置自动行的最小和最大高度 */

                .first-item {
                    /* 跨越两行两列 */
                    grid-row: 1 / 3;
                    /* 跨越两行 */
                    grid-column: 1 / 3;
                    /* 跨越两列 */
                    height: 80%;
                }

                .item {
                    max-width: 350px;

                    img {
                        position: relative;
                        display: inline-block;
                        line-height: 1;
                        width: 100%;
                        height: 150px;
                        vertical-align: middle;
                    }

                    // border: 1px #333 solid;

                }

                .title {
                    padding: 4px 0;
                    font-size: 16px;
                    color: var(--el-text-color-primary);
                }

                .clamp {
                    width: 100%;
                    position: relative;
                    // display: -webkit-box;
                    // -webkit-box-orient: vertical;
                    // overflow: hidden;
                    // line-height: 1.5em;
                    // /* 根据你的字体和行高调整 */
                    // max-height: 3em;
                    // /* 最多显示2行，根据你的行高调整 */
                    // text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: normal;
                    font-size: 12px;
                    color: var(--el-text-color-regular);
                }

                // .clamp::after {
                //     content: "...";
                //     position: absolute;
                //     bottom: 0;
                //     right: 0;
                //     // padding-left: 40px;
                //     width: 10%;
                //     text-align: right;
                //     /* 根据你的需要调整省略号的位置 */
                //     // background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
                // }

                .username {
                    margin: 0;

                    padding: 4px 0;
                    font-size: 12px;
                    color: var(--el-text-color-regular);
                }
            }

            @media (max-width: 1400px) {
                padding: 20px;
            }

            @media (max-width: 600px) {
                padding: 20px;

                /* 减去间隙后的宽度 */
                .top {
                    grid-gap: 0px;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    align-items: center;
                    /*   // grid-template-columns: 1fr; 当屏幕小于800px时，只设置一列 */
                }

                .first-item {
                    width: 100%;
                }

                .item {
                    width: 48%;
                    margin: 1%
                }

            }
        }
    }

}
</style>